<template>
	<view>
		<u-navbar height="50" back-icon-color="#fff" title="钱包余额" title-color="#fff" title-size="36"
			:background="bgStyle" :border-bottom="false"></u-navbar>
		<view class="bg">
		</view>
		<view class="top">
		</view>
		<view class="myBalance">
			<view class="tops">
				<view class="title">
					账户余额 (元)
				</view>
				<view class="rules" @click="()=>this.show = true">
					<u-icon size="28" :name="'/static/icon/tip.png'" style="margin-right: 10rpx;"></u-icon>
					<span>余额支付优惠规则</span>
				</view>
			</view>
			<view class="bottom">
				<view class="price">
					{{balance}}
				</view>
				<view class="goBtn" @click="goRecharge">
					去充值
				</view>
			</view>
		</view>
		<view class="bills">
			<view class="top_title">
				<view class="left">
					<span class="icon"></span>
					<span>余额明细</span>
				</view>
				<view class="right">
					<span>全部</span>
					<u-icon size="28" :name="'/static/icon/arrow_down.png'" style="margin-left: 10rpx;"></u-icon>
				</view>
			</view>
			<view class="cell" v-for="(item,index) in billList" :key="index" v-if="billList.length>0">
				<view class="cell_top">
					<view class="left">
						<span v-if="item.type==1">商品支付</span>
						<span v-if="item.type==2">分销收益</span>
						<span v-if="item.type==3">系统充值</span>
						<span v-if="item.type==4">余额提现</span>
					</view>
					<view class="right">
						<span v-if="item.type==1">-{{item.amount}}</span>
						<span v-if="item.type==2">+{{item.amount}}</span>
						<span v-if="item.type==3">+{{item.amount}}</span>
						<span v-if="item.type==4">-{{item.amount}}</span>
					</view>
				</view>
				<view class="cell_bottom">
					<view class="left">
						{{item.created_at}}
					</view>
					<view class="right">
						{{item.title}}
					</view>
				</view>
			</view>
			<view class="noDAta" style="width: 410rpx; height: 200rpx; margin: 40rpx auto;" v-else>
				<image src="/static/empty2.png" mode="widthFix" style="width: 410rpx;"></image>
			</view>
		</view>
		<u-popup v-model="show" mode="center" border-radius="14">
			<view class="rulesBox">
				<view class="title">
					余额支付优惠规则
				</view>
				<view class="tabs">
					<view class="tab_top tab">
						<view class="left">
							账户余额金额
						</view>
						<view class="right">
							下单结算支付优惠
						</view>
					</view>
					<view class="tab">
						<view class="left">
							账户余额≤500元
						</view>
						<view class="right">
							9.8折
						</view>
					</view>
					<view class="tab">
						<view class="left">
							500＜账户余额≤800
						</view>
						<view class="right">
							9.5折
						</view>
					</view>
					<view class="tab">
						<view class="left">
							800＜账户余额
						</view>
						<view class="right">
							9.2折
						</view>
					</view>
				</view>
				<view class="btns" @click="()=>this.show = false">
					我已知晓
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getUserInfo,getBills
	} from '@/api/user.js'
	export default {
		data() {
			return {
				show: false,
				bgStyle: {
					background: "transparent"
				},
				balance: "1000",
				billList: [],
				page:1,
				flag:false,
			}
		},
		onLoad() {
			this.init()
		},
		onReachBottom() {
			if(this.flag){
				this.page++
				this.getBill()
			}
		},
		methods: {
			init() {
				getUserInfo().then(res => {
					console.log("账户信息", res);
					this.balance = res.data.balance
				})
				this.getBill()
				
			},
			getBill(){
				getBills({
					page:this.page
				}).then(res=>{
					if(res.page<res.last_page){
						this.flag = true
					}else{
						this.flag = false
					}
					console.log("账单");
					if(res.list.length>0){
						for (let i = 0; i < res.list.length; i++) {
							this.billList.push(res.list[i])
						}
					}
				})
			},
			goRecharge() {
				uni.navigateTo({
					url: '/page/GoRecharge/GoRecharge?balance=' + `${this.balance}`
				})
			}
		}
	}
</script>

<style>
	@import url('wallet.css');

	page {
		background: #f5f5f5;
	}
</style>

<style lang="scss" scoped>
	.rulesBox {
		width: 570rpx;
		height: 530rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 1rpx;

		.title {
			text-align: center;
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
			margin-top: 20rpx;
		}

		.tabs {
			width: 500rpx;
			background: #FFFFFF;
			border: 1px solid #E9E9E9;
			border-radius: 5rpx;
			margin: 20rpx auto;
			box-sizing: border-box;
			text-align: center;
			font-size: 22rpx;

			.tab {
				display: flex;

			}

			.tab_top {
				font-size: 24rpx;
				background-color: #f5f5f5;
			}

			.tab .left {
				border-bottom: 1rpx solid #dedede;
				border-right: 1rpx solid #dedede;
				width: 250rpx;
				height: 70rpx;
				line-height: 70rpx;
				box-sizing: border-box;
			}

			.tab .right {
				border-bottom: 1rpx solid #dedede;
				width: 250rpx;
				height: 70rpx;
				line-height: 70rpx;
				box-sizing: border-box;
			}
		}

		.btns {
			border-top: 1rpx solid #dedede;
			margin-top: 60rpx;
			text-align: center;
			line-height: 100rpx;
			font-size: 30rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #333333;
		}
	}
</style>